<template>
  <view class="d-flex-column">
    <view class="text-lg py-lg">更多服务</view>
    <view class="more-services">
      <view class="more-services-item" @tap="goToExchange">
        <view class="more-services-item-circle">
          <image
            src="/static/images/mine/cdkey.png"
            class="more-services-item-circle-icon"
          />
        </view>
        <view class="more-services-item-title"> 兑换中心 </view>
      </view>
      <view class="more-services-item">
        <view class="more-services-item-circle">
          <image
            src="/static/images/mine/wtfk.png"
            class="more-services-item-circle-icon"
          />
        </view>
        <view class="more-services-item-title"> 问题反馈 </view>
      </view>
      <view class="more-services-item">
        <view class="more-services-item-circle">
          <image
            src="/static/images/mine/jmdh.png"
            class="more-services-item-circle-icon"
          />
        </view>
        <view class="more-services-item-title"> 加盟咨询 </view>
      </view>
      <view class="more-services-item">
        <view class="more-services-item-circle">
          <image
            src="/static/images/mine/gywm.png"
            class="more-services-item-circle-icon"
          />
        </view>
        <view class="more-services-item-title"> 关于我们 </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "MyAssets",
  methods: {
    goToExchange() {
      uni.navigateTo({
        url: `/pages/marketing/exchange/exchange`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.more-services {
  margin-top: 20rpx;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: $uni-spacing-row-base;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &-circle {
      background: #f4f4f7;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100rpx;
      height: 100rpx;
      border-radius: 100%;
      margin-bottom: $uni-spacing-row-base;
      &-icon {
        width: 100rpx;
        height: 100rpx;
      }
    }

    &-title {
      font-size: $uni-font-size-sm;
      color: $uni-text-color-placeholder;
    }
  }
}
</style>
